// pages/studentScoreView.js
import Toast from '@vant/weapp/toast/toast';
import {request} from '../../utils/request.js'
Page({
  data: {
    scale:1,
    width: '100%',
    noteList:[],
    imgData:[]
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    let vm = this
    wx.getStorage({
      key:'subjectInfo',
      success(res){
        vm.selectFileByStudentId(res.data)
      }
    })
  },
  //获取图片
  selectFileByStudentId(row){
    let vm = this
    request({
      loading:false,
      url:'/review-paper/exam/selectFileByStudentId',
      data:{
        subjectExamId: row.id,
        studentId: row.studentId
      },
      success (res) {
        if(res.data.status == 1){
          vm.data.imgData = res.data.data
          vm.setData({
            imgData:vm.data.imgData
          })
              setTimeout(() => {
                  vm.data.imgData.forEach((val, i) => {
                    const query = wx.createSelectorQuery();
                    // 在页面中选择你想要查询的节点
                    query.select('.resizable-image'+i) // 替换为你的元素的选择器
                      .boundingClientRect(function(rect) {                      
                        val.w = rect.width
                        val.h = rect.height
                      })
                      .exec(); // 执行查询
                  })
                  vm.findStudentNote(row)
              }, 500)
        }else{
          Toast.fail(res.data.msg);
        }
      }
    })
  },
  //查询批注
  findStudentNote(row){
    let vm = this
    request({
      loading:false,
      url:'/review-paper/exam/findStudentNote',
      data:{
        subjectExamId: row.id,
        studentId: row.studentId
      },
      success (res) {
        if(res.data.status == 1){
          //客观题
          res.data.data.objectiveNoteList.forEach((item, i) => {
            let oriPosition = JSON.parse(item.oriPosition)
            let wscales = vm.data.imgData[oriPosition[0] - 1].width / vm.data.imgData[oriPosition[0] - 1].w
            let hscales = vm.data.imgData[oriPosition[0] - 1].height / vm.data.imgData[oriPosition[0] - 1].h
            vm.data.noteList.push({
                content: item.content,
                x: (oriPosition[1] + oriPosition[3] * 1.1),
                y: (oriPosition[2] + oriPosition[4] * 1.1),
                cropNo: oriPosition[0] - 1
            })
          })
        //主观题
        res.data.data.subjectiveNoteList.forEach((item, i) => {
            let oriPosition = JSON.parse(item.oriPosition)
            let wscales = vm.data.imgData[oriPosition[0] - 1].width / vm.data.imgData[oriPosition[0] - 1].w
            let hscales = vm.data.imgData[oriPosition[0] - 1].height / vm.data.imgData[oriPosition[0] - 1].h
            vm.data.noteList.push({ //分数，阅卷老师
                font: '15px Arial',
                // content: '题块：' + item.mainNumber + ' 分数：' + item.totalScore + ' 阅卷老师：' + item.teacherName,
                content: '题块：' + item.mainNumber + ' 分数：' + item.totalScore,
                x: oriPosition[1] ,
                y: (oriPosition[2] + 50) ,
                cropNo: oriPosition[0] - 1
            })
            if(item.noteList){//批注
              item.noteList.forEach((val, j) => {
                  let position = JSON.parse(val.position)
                  vm.data.imgData.forEach((item1, i1) => {
                      if(item1.id == val.fileId){
                          val.cropNo = i
                      }
                  })
                  vm.data.noteList.push({
                      content: val.content,
                      x: position.x ,
                      y: position.y,
                      cropNo: val.cropNo
                  })
              })
          }
        })
        vm.canvasTextInit()
        }else{
          Toast.fail(res.data.msg);
        }
      }
    })
  },
  //绘制列表
  canvasTextInit(){
      let canvasArray = []
      this.data.imgData.forEach((item, i) => {
        const query = wx.createSelectorQuery()
        query.select('#canvas'+i)
        .fields({ node: true, size: true })
        .exec((res) => {
          const myCanvasText = res[0].node
          const ctx = myCanvasText.getContext('2d')
          myCanvasText.width = item.width
          myCanvasText.height = item.height 
          ctx.clearRect(0, 0, myCanvasText.width, myCanvasText.height)
          console.log(myCanvasText.width)
          canvasArray.push(ctx)
          if(this.data.noteList.length && canvasArray.length == this.data.imgData.length){
            this.data.noteList.forEach((item) => {
              if(canvasArray[item.cropNo]){
                if(myCanvasText.width>5000){
                  canvasArray[item.cropNo].font = '100px Arial'
                }else{
                  
                canvasArray[item.cropNo].font = '40px Arial'
                }
                canvasArray[item.cropNo].fillStyle = 'red'
                canvasArray[item.cropNo].fillText(item.content, item.x, item.y)
              }
              })
          }
        })
      })
  },
  onTouchEnd(){
    this.setData({
      overflow:'auto'
    })
  },
  onTouchMove: function (e) {
      if (e.touches.length === 2) {  
        this.setData({
          overflow:'hidden'
        })
        let Xm = e.touches[1].clientX - e.touches[0].clientX
        let Ym = e.touches[1].clientY - e.touches[0].clientY
        let newDistance = Math.sqrt(Xm * Xm + Ym * Ym)
        if(Math.abs(newDistance - this.data.distance)<5){
          return
        }
        if(newDistance > this.data.distance){
          if(this.data.scale<=3){
            this.data.scale = this.data.scale+0.05
          }
        }else{
          if(this.data.scale>=0.2){
            this.data.scale = this.data.scale-0.05
          }
        }
        console.log(parseInt(this.data.scale*100 + '%'),this.data.scale)
        this.data.distance = newDistance

        this.data.width = parseInt(this.data.scale*100 + '%')
        
        this.setData({
          width: parseInt(this.data.scale*100) + '%'
        })
      }  
  },
})